﻿@model Tau.ViewModels.ImageList

   
    <link rel="stylesheet" href="/Content/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
    <script src="/Content/prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
		
    <style type="text/css" media="screen">
	    ul li { display: inline; }
    </style>
	
    <div id="addEdit" title="Edit Image" style="display:none"></div>

    @{ var categoryList = new List<string> { "Book", "CD", "DVD", "Other" };
       
    }
    @if (Model != null)
    {
        var galleryColumns = Model.Mode == Tau.ViewModels.DisplayMode.Edit ? 5 : 3;
        var currentColumn = 1;
    
        <table class="gallery clearfix">
            <tr>
                <td colspan="5">Show Images in Category: 
                    @Html.DropDownListFor(model => model.Category, new SelectList(categoryList))
                </td>
            </tr>
            <tr>

            @if (Model.Images.Count == 0)
            {
                <td>
                    There are no images in this category
                </td>
            }
            else
            {
                foreach (var image in Model.Images)
                {
                    if (currentColumn > galleryColumns)
                    {
                        @:</tr><tr>
                        { currentColumn = 1; }
                    }

                    <td>
                        <a href="@Url.Action("GetImage", "Image", new { id = image.ImageId, type = "large", area="" })" rel="prettyPhoto[gallery2]" title="@image.FileName">
                        <img src="@Url.Action("GetImage", "Image", new { id = image.ImageId, type = "thumbnail", area="" })" alt="@image.FileName" /></a>
            
                        <br />

                        @if (Model.Mode == Tau.ViewModels.DisplayMode.Edit)
                        {
                            <a href="#" onclick="deleteImage(@image.ImageId, '@Model.Mode', '@image.FileName');">delete</a>
                            <br />
                            <select id="categoryChange" name="categoryChange" onchange="changeCategory(this, '@image.ImageId', '@image.Category');">
                                <option value="">change category to:</option>
                                @foreach(var category in categoryList)
                                {
                                    if (category != image.Category)
                                    {
                                        <option value="@category">@category</option>
                                    }
                                }
                            </select>
                        }
                        else
                        {
                            <a href="#" onclick="setSelectedImage(@image.ImageId, '@image.FileName');">insert</a>
                        }
       
                    </td>
            
                        { currentColumn++; }
                }
            }
           </tr>
        </table>
    }
   
    <input type="hidden" id="selectedImageTag" />
    <input type="hidden" id="selectedImageUrl" />
    <input type="hidden" id="selectedImageThumbnailUrl" />
    <input type="hidden" id="selectedImageId" />
    <input type="hidden" id="selectedImageFileName" />

    <script type="text/javascript" charset="utf-8">

        $('#Category').change(function () {

            var mode = '@Model.Mode';
            var urlAction = '@Url.Action("ImagesByCategory", "ImageAdmin")';

            urlAction = urlAction + "?mode=" + mode + "&category=" + $(this).find(":selected").val();

            $("#imageList").load(urlAction);
        });


        $(document).ready(function () {
            $("area[rel^='prettyPhoto']").prettyPhoto({deeplinking:false});
            $(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({ theme: 'facebook', deeplinking:false });
            $(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({ hideflash: true, deeplinking: false });
            $(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({ overlay_gallery: false, deeplinking: false });
        });

        function changeCategory(selectList, id, currentCategory)
        {
            var urlAction = '@Url.Action("ChangeImageCategory", "ImageAdmin")';

            urlAction = urlAction + "?id=" + id + "&newCategory=" + selectList.value + "&category=" + currentCategory;

            $("#imageList").load(urlAction);
        };

        function deletePage(pageId) {

            showYesNoDialog(
                        "Are you sure you want to delete this page?",
                        function () {
                            location.href = '@Url.Action("Delete", "PageAdmin")' + '?pageId=' + pageId;
                        });
                    }

        function deleteImage(id, mode, fileName) {

            showYesNoDialog(
                "Are you sure you want to delete " + fileName + "?",
                function() {
                    var urlAction = '@Url.Action("Delete", "ImageAdmin")';
                    urlAction = urlAction + "?id=" + id + "&mode=" + mode;
                    $(this).dialog("close");
                    $("#imageList").load(urlAction);
                });
            }

        function popupEdit(editId) {

                showProgress();

                var url = '@Url.Action("EditImage", "ImageAdmin")' + "?imageId=" + editId;

                $("#addEdit").load(url, function () {
                    $("#addEdit").dialog({
                        autoOpen: true,
                        height: 400,
                        width: 400,
                        modal: true
                    });
                    hideProgress();
                });
            }

        function setSelectedImage(id, fileName) {
            var urlAction = encodeURI('@Url.Action("GetImage", "Image", new {area=""})');
            var imageUrl = urlAction + "/" + id + "/large";
            var thumbUrl = urlAction + "/" + id + "/thumbnail";
            var imageTag = "<img src='" + urlAction + "/" + id + "/large' alt='" + fileName + "' />";

            $("#selectedImageId").val(id);
            $("#selectedImageTag").val(imageTag);
            $("#selectedImageUrl").val(imageUrl);
            $("#selectedImageThumbnailUrl").val(thumbUrl);
            $("#selectedImageFileName").val(fileName);
        
            $("#selectImage").dialog("close");
        }

    </script>